body { margin-top: 0; margin-left:10px; margin-right: 10px; background-color: #F0F0F0 }

input { border-radius: 7px; height: 30px;}
textarea { border-radius: 7px; min-width: 200px; height: 300px;} 
table { display: flex;}
tr td { padding: 3px; }
select { border-radius: 7px }
table { width: 100%; }
/*table.halfs tbody tr td { width:50%; }
table.thirds tbody tr td { width:33%; }*/
/* Removes outlines for focus on whole document */
*:focus {
    outline: 0;
}

/* styling of all links in general */
a { text-decoration: none }

/*the banner top of the page */
#banner { height: 100px; min-width: 680px; width: 100%; padding-top: 0px; margin-top: 0px; background-color:#003B66;border-left: #A8A8A8 solid 1px; border-right: #A8A8A8 solid 1px; }
/* The menu on the banner tht handles logut etc */
#bannerMenu { height: 100%; width: 330px; float: right; background-color: #003B66;}
/* styling of the links in the banner menu */
#bannerMenu a { color: white }
/* contains mod-panel and my profile link */
#bannerMenuLeft { height: 100%; width: 90px; padding-left:10px; float:left; overflow: hidden;}
/* The links on the banner */
.bannerLinks { height: 20px; width: 100%; margin-bottom:5px; margin-top: 10px; color: white}
/* contains information about the user and logout link */
#bannerMenuRight { height: 100%; width: 240px; float:right; overflow: hidden;}

/* The CSS for login-box */
/* space of error message */
#error { height: 20px; margin-top: 80px; width: 305px; margin-left: auto; margin-right: auto; color: red; }
/* The box containing the login elements */
#loginBox {  height: 215px; width: 350px; padding-top:10px; margin: 10px auto; background-color: white; border: #A8A8A8 solid 1px; border-radius: 10px;}
/* The images inside the login box */
#loginBox img { margin-left: 6px; float: left; }
/* the input fields for the login */
.inputLogin { height: 30px; width: 90%; margin-bottom: 10px; margin-left:3%; padding: 5px; background-color:white; border: 1px solid; border-radius: 10px;}
/* fat text on the login page */
.fat { float: left; font-weight: bold; font-size: 14px;}
/* The "button" for login */
#login { margin-left: 20px; width: 80px; height: 20px}
/* hover element over login-button so users see that it is clickable */
#login:hover { cursor: pointer; }
/* focus style of the login-element */
#login:focus { text-decoration: underline; }
/* the text inside the login-box */
#loginBox p {font-size: 14px; margin-left: 20px; margin-top: 10px; margin-bottom: 0px;}


/* The menu at the top of the page */
#topMenu { height: 30px; min-width: 680px; width: 100%; padding-top: 7px; padding-left: 5%; padding-right: 5%; border: #A8A8A8 solid 1px; background-color: white; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
/* The links at the top of the page */
.topMenuLinks { margin-left: 7%}

/* The menu at the left side of the page */
#leftMenu { float:left; padding-bottom: 15px; margin-top:30px; width:230px; float:left; background-color:white; border: #A8A8A8 solid 1px; border-radius: 10px; overflow:hidden}
#leftMenu p { color: #003B66; }
/* The top field in the left menu stating which page */
#menuPage { height:25px; margin: 7px auto; margin-bottom: 15px; width:95%; background-color: #003B66; color: white; border-radius: 10px }
#menuPage p { padding-top:3px; padding-left:30px; color: white; text-decoration: underline}
/* Stling for the navbar to the left */
.nav { padding-left: 15px; color: #003B66 }
.nav  li  a { padding : 5px 15px; }
.nav-divider { position: relative; left: -15px; width: 230px; }

/* the area that contains all the information on the page */
#contentAreaWrapper { position: absolute; left: 200px; margin-left: 50px; margin-top: 30px; margin-bottom: 50px; float:left; min-height: 300px; min-width: 450px; width: calc(100% - (340px)); }
#contentArea{ margin: auto; padding: 10px 20px; width: 80%; background-color:white; border: #A8A8A8 solid 1px; border-radius: 10px; }
#realContent  * { margin: auto;}
#main {  }